<template>
  <el-row type="flex" justify="center">
    <el-col :span="12" >
      <el-form size="mini" :model="userInfo" :rules="rules" ref="userInfo" label-width="150px">
        <el-form-item label="用户名" prop="username" >
          <el-input v-model="userInfo.username" :disabled="flag"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="name" >
          <el-input v-model="userInfo.name" :disabled="flag"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="userInfo.gender">
            <el-radio :label="0" border>男</el-radio>
            <el-radio :label="1" border>女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input type="number" min="1" v-model.number="userInfo.age"></el-input>
        </el-form-item>
        <el-form-item label="请选择入职日期" prop="joindate">
          <el-date-picker
              style="width: 100%"
              v-model="userInfo.joindate"
              type="datetime"
              placeholder="选择日期时间"
              default-time="12:00:00">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="请选择离职日期" prop="leavedate">
          <el-date-picker
              style="width: 100%"
              v-model="userInfo.leavedate"
              type="datetime"
              placeholder="选择日期时间"
              default-time="12:00:00">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="userInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="userInfo.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="subChange('userInfo')">提交修改</el-button>
        </el-form-item>
    </el-form>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Grzlxg",
  data() {
    let checkAge= (rule, value, callback) =>{
      if (!Number.isInteger(value)) {
        callback(new Error('请输入数字值'));
      } else {
        if (value < 18) {
          callback(new Error('必须年满18岁'));
        } else {
          callback();
        }
      }
    }
    return {

      flag:true,
      userInfo: {

      },
      rules: {
        username:[{required: true, message: '请输入内容', trigger: 'blur'}],
        name:[{required: true, message: '请输入内容', trigger: 'blur'}],
        gender:[{required: true, message: '请输入内容', trigger: 'blur'}],
        age:[
            {required: true, message: '请输入内容', trigger: 'blur'},
            { validator: checkAge, trigger: 'blur' }
            ],
        joindate:[{required: true, message: '请输入内容', trigger: 'blur'}],
        phone:[
            {required: true, message: '请输入内容', trigger: 'blur'},
            {max:11,message: '请输入正确的手机号',trigger: 'blur'}
            ],
      }
    };
  },
  methods:{
    logout(){
      let flag=this;
      this.$axios.post("/logout").then(function (result) {
        localStorage.clear();
        sessionStorage.clear();
        flag.$store.commit("resetState");
        flag.$router.push("/login");
      })
    },
    getUserInfo(){
      this.$axios.get("/nb/user/getUserInfo").then(result=>{
        this.userInfo=result.data.data;
      })
    },
    subChange(formName){
      this.$refs[formName].validate((valid) => {
        this.$confirm('此操作将会让您重新登录，未保存的工作将会失效, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (valid) {
            this.$axios.post('/nb/user/changeUserInfo/root',this.userInfo).then(res=>{
              console.log(res);
              if (res.data.data){
                this.$message.success("修改成功，即将跳转到登录页面！")
                this.logout();
              }
            })
          }
        })
      });
    },
    canChange(){
      let role = this.permList[0];
      console.log(role);
      if (role=="ROLE_root"){
        this.flag=false;
      }else {
        this.flag=true;
      }
    }
  },
  created() {
    this.getUserInfo();
    this.canChange();
  },
  computed:{
    permList:{
      get(){
        return this.$store.state.menus.permList;
      }
    }
  }
}
</script>

<style scoped>

</style>